<template>
  <div class="h-full bg-zinc-200 dark:bg-zinc-800 duration-500 overflow-auto xl:pt-1 ">
    <div class="relative max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-500 xl:rounded-sm xl:border-zinc-200
                xl:dark:border-zinc-600 xl:border xl:px-4 xl:py-2">
      <!--      移动端-->
      <mine-navbar sticky v-if="isMobileTerminal" :clickLeft="onNavbarLeftClick">个人资料</mine-navbar>
      <div v-else class="text-lg font-bold text-center mb-4 dark:text-zinc-300">个人资料</div>
      <div class="h-full w-full px-1 pb-4 text-sm mt-2 xl:w-2/3 xl:text-center">
        <!--        头像部分-->
        <div class="py-1 xl:absolute xl:right-[16%] xl:text-center">
          <span class="w-8 inline-block mb-2 font-black text-sm dark:text-zinc-300 xl:block xl:mx-auto">我的头像</span>
          <div class="relative w-[80px] h-[80px] group xl:cursor-pointer xl:left-1/2 xl:translate-x-[-50%]"
               @click="onAvatarClick">
            <img class="rounded-full w-full h-full xl:inline-block" :src="$store.getters.userInfo.avatar" alt=""/>
            <div class="absolute top-0 rounded-full w-full h-full bg-black/40 hidden xl:group-hover:block duration-300">
              <mine-svg-icon name="change-header-image" class="w-2 h-2 m-auto mt-2"></mine-svg-icon>
              <div class="text-xs text-white dark:text-zinc-300 scale-90 mt-0.5">点击更换头像</div>
            </div>
          </div>
          <!--        隐藏域-->
          <input v-show="false" ref="inputFileTarget" type="file" accept=".png,.jpeg,.jpg,.gif"
                 @change="onSelectImgHandler"/>
          <p class="mt-1 text-zinc-500 dark:text-zinc-400 text-xs xl:w-10 ">支持.png、.jpeg、.jpg、.gif格式大小1M以内的图片</p>
        </div>
        <!--      信息输入-->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">用户名</span>
          <!-- model=”userInfo“ 更新为：:model="$store.getters.userInfo.nickName @update:modelValue=changeStoreUserInfo('nickName',$event)"-->
          <mine-input class="w-full" max="20" v-model="userInfo.nickName"></mine-input>
        </div>
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">职位</span>
          <mine-input class="w-full" v-model="userInfo.title"></mine-input>
        </div>
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">公司</span>
          <mine-input class="w-full" v-model="userInfo.company"></mine-input>
        </div>
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">个人主页</span>
          <mine-input class="w-full" v-model="userInfo.homepage"></mine-input>
        </div>
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0">个人介绍</span>
          <mine-input class="w-full" type="textarea" max="50" v-model="userInfo.introduction"></mine-input>
        </div>

        <mine-button class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%]
            xl:translate-x-[-50%]" :loading="loading" @click="onChangeProfile">保存修改
        </mine-button>
        <mine-button v-if="isMobileTerminal" class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%]
            xl:translate-x-[-50%]" @click="onLogoutClick">退出登录
        </mine-button>
      </div>
    </div>
    <mine-dialog v-if="!isMobileTerminal" title="裁剪图片" v-model="isDialogVisable">
      <mine-change-avatar :blob="currentBlob" @close="isDialogVisable = false"></mine-change-avatar>
    </mine-dialog>
    <!--    移动端-->
    <mine-popup v-else :class="{'h-screen':isDialogVisable}" v-model="isDialogVisable">
      <mine-change-avatar :blob="currentBlob" @close="isDialogVisable = false"></mine-change-avatar>
    </mine-popup>
  </div>
</template>

<script setup>
import {isMobileTerminal} from "@/utils/flexible";
import {ref, watch} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {MineConfirm, MineMessage} from "@/libs";
import MineChangeAvatar from "./components/change-avatar.vue";

const store = useStore()
const router = useRouter()
const onNavbarLeftClick = () => {
  //移动端下跳转的类型
  store.commit('app/changeRouterType', 'back')
  router.back()
}

const inputFileTarget = ref(null)
const onAvatarClick = () => {
  inputFileTarget.value.click()
}

const isDialogVisable = ref(false)
//选中的图片
const currentBlob = ref("")
/**
 * 选中文件之后的回调
 */
const onSelectImgHandler = () => {
  //获取选中的文件
  const imgFile = inputFileTarget.value.files[0]
  currentBlob.value = URL.createObjectURL(imgFile)
  isDialogVisable.value = true
}

/**
 * 当两次选择是同一个图片，change事件不会被触发
 */
watch(isDialogVisable, (val) => {
  if (!val) {
    inputFileTarget.value.value = null
  }
})

const onLogoutClick = () => {
  MineConfirm('您确定要退出登录吗?').then(() => {
    store.dispatch('user/logout')
  })
}

const userInfo = ref({...store.getters.userInfo})
// const changeStoreUserInfo = (key, value) => {
//   store.commit('user/setUserInfo', {
//     ...store.getters.userInfo, [key]: value
//   })
// }

const loading = ref(false)

const onChangeProfile = () => {
  loading.value = true
  //TODO:修改个人信息
  MineMessage("success", "用户信息修改完成")
  //TODO:同步vuex
  //store.commit('user/setUserInfo',userInfo.value)
  loading.value = false
}

</script>